<template>
	<div>
	  
	  <myheader></myheader>
  
	  <br>
		  <!-- 面包屑导航 -->
		  <Breadcrumb :datas='datas'></Breadcrumb>
	  <section class="featured-block text-center">
		  <div class="container">

			
			  
			  <table>
				  <tr style='padding: 5px;'>
					  <td style='padding: 5px;'>
						  商品名称(name):
					  </td>
					  <td style='padding: 5px;'>
						  <input type="text" name="" id="" v-model='name'>
					  </td>
				  </tr>

				  <tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						HeyUi商品标签(mytags):
					</td>
					<td style='padding: 5px;'>

						<!-- heyui标签显示 -->
						<TagInput
							v-model="mytags"
							type="string"
							split=","
							placeholder="
							请输入标签,输入完毕后按回车确认
							"
						>
													
						</TagInput>
					</td>
				</tr>

				  <tr style='padding: 5px;'>
					  <td style='padding: 5px;'>
						  商品描述(desc):
					  </td>
					  <td style='padding: 5px;'>
						  <!-- <textarea name="" id="" cols="30" rows="3" v-autosize v-wordcount="30" v-model="desc"></textarea> -->

						  <quill-editor class='ql-editor' ref='myTextEditor' 
						  	@change="editorchange($event)" :content='desc'></quill-editor>

					  </td>
				  </tr>
				  
				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						商品价格(price):
					</td>
					<td style='padding: 5px;'>
						<input type="text" name="" id="" v-model='price'>
					</td>
				</tr>

				  <tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						商品颜色(color):
					</td>
					<td style='padding: 5px;'>
						<input type="text" name="" id="" v-model='color'>
					</td>
				</tr>

				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						商品尺码(size):
					</td>
					<td style='padding: 5px;'>
						<input type="text" name="" id="" v-model='size'>
					</td>
				</tr>

				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						商品规格(season):
					</td>
					<td style='padding: 5px;'>
						<input type="text" name="" id="" v-model='season'>
					</td>
				</tr>

				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						商品分类(cate_id):
					</td>
					<td style='padding: 5px;'>
						<input type="text" name="" id="" v-model='cate_id'>
					</td>
				</tr>
			
				  <tr style='padding: 5px;'>
					  <td style='padding: 5px;'>
  
					  </td>
					  <td style='padding: 5px;'>
						  <Button @click='submit'>修改商品</Button>&nbsp;&nbsp;
  
					  </td>
				  </tr>
  
			  </table>
  
		  </div>
	  </section>
	  
	  <myfooter></myfooter>
	  
	</div>
	
  </template>
  
  
   
  <script>
  
  //导包
  import myheader from './myheader.vue';
  import myfooter from './myfooter.vue';
  
  import {config,formatXml} from '../config.js'

  import { quillEditor } from 'vue-quill-editor';
  //引入富文本编辑器样式
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'

  
  export default {
	data () {
	  return {
		msg: "这是一个变量",
		//声明面包屑变量
		datas:[{title:'首页',route:{name:'index'}},{title:'修改商品'}],
	//定义传递参数变量
		//商品名称
		name:'',
		//商品描述
		desc:'',
		//商品详情
		// parms:'',
		color:'',
		size:'',
		season:'',
		//商品价格
		price:'',
		//商品分类
		cate_id:'',

		//heyui商品标签变量
		mytags:'',

		//商品id
		id:'',

		//存储编辑器信息
		content:'',
  
	  }
	},
  
	//注册组件标签
	components:{
	  'myheader': myheader,
	  'myfooter': myfooter,

	  //富文本编辑器标签注册
	  quillEditor,

  
	},
  
	mounted:function(){
		//接收商品id
	  	var id = this.$route.query.id;
	 	this.id = id;

	 	this.get_data()
	
  	},
	methods:{
  
		//提交
		submit:function(){
			
			// console.log(this.name)
			// console.log(this.desc)
			// console.log(this.price)
			// console.log(this.color)
			// console.log(this.season)
			// console.log(this.cate_id)

			var parms = {};
			parms['color'] = this.color;
			parms['size'] = this.size;
			parms['season'] = this.season;

			//格式化字符串
			parms = JSON.stringify(parms);
			console.log(parms)

			// //由字符换转换回json
			// parms = JSON.parse(parms);
			// console.log(parms)


			// //将变量转换为json格式
			// var parms_str = {"color":this.color,"season":this.season};
			// // console.log(parms_str)
			// //强转为字符串
			// parms_str = JSON.stringify(parms_str);
			// console.log(parms_str)
			const params = new FormData()
			params.append('id',this.$route.query.id)
			params.append('name',this.name)
			params.append('desc',this.desc)
			params.append('parms',this.parms)
			params.append('price',this.price)
			params.append('cate_id',this.cate_id)


  
			//向后端发送请求
			this.axios.post(config['after_end'] + '/updategoods/',params).then((result)=>{
				//打印接口返回值
				console.log(result)
				//向用户提醒后端制定的message
				this.$Message(result.data.message)

				//商品入库成功才添加标签
				// if(result.data.id){
					// 向后端发送请求(储存商品标签)
					this.axios.get(config['after_end'] + '/updatetags/',{params:{id:result.data.id,		tags:this.mytags,name:this.name,desc:this.desc,parms:parms,						price:this.price,cate_id:this.cate_id}
					}).then((result)=>{
						//打印接口返回值
						console.log(result)
						//向用户提醒后端制定的message
						this.$Message(result.data.message)
  
					})

			})
  
		},	

		//商品信息接口
		get_data:function(){
		//获取商品详情信息
		this.axios.get(config['after_end'] + '/goodsitem/',{params:{id:this.$route.query.id}}).then((result)=>{
			//打印接口返回值
			console.log(result)
				
			//向用户提醒后端制定的message
			// this.$Message(result.data.message)
			//给列表赋值
			this.name = result.data.data.name;
			this.price = result.data.data.price;
			this.desc = result.data.data.desc;
			this.src = 'http://localhost:8000/static/upload/' + result.data.data.img;
			this.cate_id = result.data.data.cate_id;
			this.video_key = result.data.data.video;		

			var parms = result.data.data.parms;

			//进行转换
			parms = JSON.parse(parms)

			this.color = parms.color;
			this.size = parms.size;

			// console.log(parms);	
			
		});

		this.axios.get(config['after_end'] + '/gettags/',
		{parms:{id:this.id}}
		).then((result)=>{
			console.log(result);

			//赋值
			var mytags = result.data.tags;
			mytags = mytags.join(",");
			this.mytags = mytags;

			// console.log(mytags);

		})
		
		},

		//编辑器更改方法
		editorchange:function({editor,html,text}){
			this.desc = html;
			console.log(this.desc);


		}
	   
	},

  }
  
  
  </script>
   
  <style>
  
  
  
  </style>